<template>
	<view class="image-box">
		<view>
			<view v-if="showData.imageList && showData.imageList.length > 0 && showData.imageList[0].url"
				class="image-view-box">
				<view v-if="showData.type === '1'"
					:style="{ 'margin-left': `${showData.styleMargin}rpx`,'margin-right': `${showData.styleMargin}rpx`, 'padding-bottom': `${showData.stylePadding}rpx`, }">
					<image v-for="(item, index) in showData.imageList" :key="index" style="display: block;width: 100%;" :src="item.url"
						@tap="toPage(item.linkUrl)" alt="" />
				</view>
				<swiper v-else class="screen-swiper square-dot image-view-item"
					:style="{ 'margin-left': `${showData.styleMargin}rpx`,'margin-right': `${showData.styleMargin}rpx` }"
					:indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500"
					indicator-color="#8799a3" indicator-active-color="#0081ff">
					<swiper-item v-for="(item, index) in showData.imageList" :key="index"
						:class="tabCur == index ? 'cur' : ''" @tap="toPage(item.linkUrl)">
						<image :src="item.url" mode="aspectFill" ></image>
					</swiper-item>
				</swiper>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		toJumpUrl,
	} from '@/utils/index.js';
	export default {
		props: {
			showData: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				tabCur: 0
			}
		},
		methods: {
			toPage(jumpUrl) {
				toJumpUrl(jumpUrl);
			},
		}
	}
</script>

<style scoped lang="scss">
	.image-box {
		.cursor {
			cursor: pointer;
			font-size: 12px;
			color: #fff;

			&.color {
				color: #2c3e50;
			}
		}

		img {
			width: 100%;
			user-select: none;
		}

		.image-view-box {
			position: relative;
			overflow: hidden;

			&.ad-view-2,
			&.ad-view-3 {
				white-space: nowrap;
				display: -webkit-box;

				.image-view-item {
					width: 100%;
				}
			}

			&.ad-view-3 {
				.image-view-item {
					width: 40%;
				}
			}


		}

		.image-view-item {
			position: relative;
			height: 135px;
			overflow: hidden;
			font-size: 12px;
			background-color: #ebf8fd;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			color: #88c4dc;
			text-align: center;

			.image-title {
				line-height: 135px;
			}


		}
	}
</style>
